<template>
  <div class="views-zhuye" style="margin-top: 20px">
    <div>
      <e-container>
        <el-row :gutter="15">
          <el-col :md="8">
            <div class="hjl-titledianzi">
              <div class="section_title">
                <h2>
                  <span>最新公告</span>
                </h2>
              </div>
              <div class="section_content">
                <div class="hotnews class2">
                  <ul class="a">
                    <li v-for="(r,i) in gonggaolist">
                      <router-link :to="{path:'/gonggao/detail',query:{id:r.id}}" class="clearfix">
                        <span class="dog">{{ i+1 }}</span>
                        <span class="shijian">{{ r.addtime }}</span>
                        {{ r.biaoti }}
                      </router-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :md="16">
            <el-carousel indicator-position="outside" height="380px">
              <el-carousel-item v-for="item in bhtList" :key="item.id">
                <a href="javascript:;">
                  <div
                      style="background-size: cover"
                      @click="$goto(item.url)"
                      :style="{'background-image': 'url('+$formatImageSrc(item.image)+')',width:'100%', height: '380px'}"
                  ></div>
                </a>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </e-container>
    </div>
    <div>
      <e-container>
        <div class="hjl-titledianzi">
          <div class="section_title">
            <h2>
              <span>推荐商品</span>
            </h2>
          </div>
          <div class="section_content">
            <div class="floor_goods_wrap clearfix">
              <el-row :gutter="20">
                <el-col :md="6" v-for="r in shangpinlist">
                  <div class="floor_goods_wrap_li">
                    <div class="floor_goods_wrap_b">
                      <router-link :to="{path:'/shangpin/detail',query:{id:r.id}}" class="floor_goods_img">
                        <e-img :src="r.tupian" pb="70"></e-img>
                      </router-link>
                      <router-link :to="{path:'/shangpin/detail',query:{id:r.id}}" class="floor_goods_tit" v-html="$substr(r.mingcheng,20)"></router-link>
                      <router-link :to="{path:'/shangpin/detail',query:{id:r.id}}" class="floor_goods_txt" v-html="$substr(r.xiangqing,20)"></router-link>
                      <router-link :to="{path:'/shangpin/detail',query:{id:r.id}}" class="floor_goods_price"> ￥{{ r.jiage }}元 </router-link>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </e-container>
    </div>


    <div style="margin-top: 20px">
      <e-container>
        <div class="hjl-titledianzi">
          <div class="section_title">
            <h2>
              <span>热销商品</span>
            </h2>
          </div>
          <div class="section_content">
            <div class="floor_goods_wrap clearfix">
              <el-row :gutter="20">
                <el-col :md="6" v-for="r in shangpinlist2">
                  <div class="floor_goods_wrap_li">
                    <div class="floor_goods_wrap_b">
                      <router-link :to="{path:'/shangpin/detail',query:{id:r.id}}" class="floor_goods_img">
                        <e-img :src="r.tupian" pb="70"></e-img>
                      </router-link>
                      <router-link :to="{path:'/shangpin/detail',query:{id:r.id}}" class="floor_goods_tit" v-html="$substr(r.mingcheng,20)"></router-link>
                      <router-link :to="{path:'/shangpin/detail',query:{id:r.id}}" class="floor_goods_txt" v-html="$substr(r.xiangqing,20)"></router-link>
                      <router-link :to="{path:'/shangpin/detail',query:{id:r.id}}" class="floor_goods_price"> ￥{{ r.jiage }}元 </router-link>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </e-container>
    </div>
  </div>
</template>

<script setup>
    import http from "@/utils/ajax/http";
    import DB from "@/utils/db";

    import { ref, reactive } from "vue";
    import { useRoute } from "vue-router";
    import { session } from "@/utils/utils";
    import { resetDate } from "@/utils/date";

    const route = useRoute();
    // 获取轮播图信息
    const bhtList = DB.name("lunbotu").order("id desc").limit(5).selectRef();

    /**
     * 定义响应式变量shangpinlist,并获取数据商品模块的数据
     * @type {UnwrapNestedRefs<EShangpin[]>}
     */
    const shangpinlist = DB.name("shangpin").where("issh", "是").limit("4").order("rand()").selectRef();
    const shangpinlist2 = DB.name("shangpin").where("issh", "是").limit("4").order("xiaoliang desc").selectRef();


    // const shangpinlist = ref([]); //DB.name("haocaixinxi").limit("4").order("id desc").selectRef();
    // http.post('/api/filter/selectAll').then(res=>{
    //   if(res.code == 0){
    //     shangpinlist.value = res.data;
    //   }
    // });


    /**
     * 定义响应式变量gonggaolist,并获取数据公告模块的数据
     * @type {UnwrapNestedRefs<EGonggao[]>}
     */
    const gonggaolist = DB.name("gonggao").limit("3").order("id desc").selectRef();
</script>

<style scoped lang="scss">
    .views-zhuye {
    }
</style>
